[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "three": "0.182.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef } from "react" import * as THREE from "three" export default function PirateShipGame() { const mountRef = useRef(null) useEffect(() => { if (!mountRef.current) return // Scene setup const scene = new THREE.Scene() scene.background = new THREE.Color(0x7ec8e3) // Enhanced sky with gradient-like color scene.fog = new THREE.Fog(0x7ec8e3, 50, 250) // Isometric camera const aspect = window.innerWidth / window.innerHeight const frustumSize = 40 const camera = new THREE.OrthographicCamera( (frustumSize * aspect) / -2, (frustumSize * aspect) / 2, frustumSize / 2, frustumSize / -2, 0.1, 1000, ) camera.position.set(30, 30, 30) camera.lookAt(0, 0, 0) // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.shadowMap.enabled = true renderer.shadowMap.type = THREE.PCFSoftShadowMap mountRef.current.appendChild(renderer.domElement) // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.6) scene.add(ambientLight) const sunLight = new THREE.DirectionalLight(0xffffff, 0.8) sunLight.position.set(50, 50, 25) sunLight.castShadow = true sunLight.shadow.camera.left = -100 sunLight.shadow.camera.right = 100 sunLight.shadow.camera.top = 100 sunLight.shadow.camera.bottom = -100 sunLight.shadow.mapSize.width = 2048 sunLight.shadow.mapSize.height = 2048 scene.add(sunLight) // Ocean const oceanGeometry = new THREE.PlaneGeometry(500, 500) const oceanMaterial = new THREE.MeshStandardMaterial({ color: 0x1a8fb0, // Improved ocean with better tropical water color roughness: 0.4, metalness: 0.3, }) const ocean = new THREE.Mesh(oceanGeometry, oceanMaterial) ocean.rotation.x = -Math.PI / 2 ocean.receiveShadow = true scene.add(ocean) // Create palm tree function function createPalmTree(x: number, z: number) { const group = new THREE.Group() // Trunk const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.4, 4, 8) const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513 }) const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial) trunk.position.y = 2 trunk.castShadow = true group.add(trunk) // Leaves const leafMaterial = new THREE.MeshStandardMaterial({ color: 0x228b22 }) for (let i = 0; i < 6; i++) { const angle = (i / 6) * Math.PI * 2 const leafGeometry = new THREE.ConeGeometry(0.5, 3, 4) const leaf = new THREE.Mesh(leafGeometry, leafMaterial) leaf.position.set(Math.cos(angle) * 1.5, 4.5, Math.sin(angle) * 1.5) leaf.rotation.z = Math.cos(angle) * 0.5 leaf.rotation.x = Math.sin(angle) * 0.5 leaf.castShadow = true group.add(leaf) } group.position.set(x, 0, z) return group } function createRock(x: number, z: number, size: number) { const rockGeometry = new THREE.DodecahedronGeometry(size, 0) const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 }) const rock = new THREE.Mesh(rockGeometry, rockMaterial) rock.position.set(x, size * 0.3, z) rock.castShadow = true rock.receiveShadow = true return rock } // Create island function function createIsland(x: number, z: number, size: number) { const group = new THREE.Group() // Sand const islandGeometry = new THREE.CylinderGeometry(size, size * 0.8, 0.5, 16) const islandMaterial = new THREE.MeshStandardMaterial({ color: 0xf4a460 }) const island = new THREE.Mesh(islandGeometry, islandMaterial) island.position.y = 0.25 island.castShadow = true island.receiveShadow = true group.add(island) const numTrees = Math.floor(size / 1.5) + 2 for (let i = 0; i < numTrees; i++) { const angle = (i / numTrees) * Math.PI * 2 + Math.random() * 0.5 const distance = size * 0.4 * Math.random() + size * 0.2 const tree = createPalmTree(Math.cos(angle) * distance, Math.sin(angle) * distance) group.add(tree) } if (Math.random() > 0.5) { const numRocks = Math.floor(Math.random() * 3) + 1 for (let i = 0; i < numRocks; i++) { const angle = Math.random() * Math.PI * 2 const distance = size * 0.6 * Math.random() const rockSize = 0.3 + Math.random() * 0.4 const rock = createRock(Math.cos(angle) * distance, Math.sin(angle) * distance, rockSize) group.add(rock) } } group.position.set(x, 0, z) return group } const islands = [ // Original islands (enhanced) createIsland(20, 20, 10), createIsland(-30, 15, 7), createIsland(15, -25, 9), createIsland(-20, -30, 6), createIsland(40, -10, 11), createIsland(-40, 35, 8), // New islands for a more populated world createIsland(50, 30, 7), createIsland(-50, -10, 8), createIsland(0, 40, 9), createIsland(-15, 0, 5), createIsland(35, -35, 6), createIsland(-35, -50, 10), createIsland(60, 0, 7), createIsland(-60, 20, 9), createIsland(25, 50, 8), createIsland(-25, 45, 6), createIsland(45, 15, 5), createIsland(10, -50, 7), createIsland(-45, -20, 8), createIsland(30, -60, 9), ] islands.forEach((island) => scene.add(island)) // Create pirate ship const ship = new THREE.Group() // Hull const hullGeometry = new THREE.BoxGeometry(3, 2, 6) const hullMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513 }) const hull = new THREE.Mesh(hullGeometry, hullMaterial) hull.position.y = 1 hull.castShadow = true ship.add(hull) // Bow (front) const bowGeometry = new THREE.ConeGeometry(1.5, 2, 4) const bowMaterial = new THREE.MeshStandardMaterial({ color: 0x654321 }) const bow = new THREE.Mesh(bowGeometry, bowMaterial) bow.position.set(0, 1, 4) bow.rotation.x = Math.PI / 2 bow.castShadow = true ship.add(bow) // Mast const mastGeometry = new THREE.CylinderGeometry(0.2, 0.2, 6, 8) const mastMaterial = new THREE.MeshStandardMaterial({ color: 0x4a3520 }) const mast = new THREE.Mesh(mastGeometry, mastMaterial) mast.position.y = 4 mast.castShadow = true ship.add(mast) // Sail const sailGeometry = new THREE.PlaneGeometry(3, 4) const sailMaterial = new THREE.MeshStandardMaterial({ color: 0xf5f5dc, side: THREE.DoubleSide, }) const sail = new THREE.Mesh(sailGeometry, sailMaterial) sail.position.set(0, 4, 0.5) sail.castShadow = true ship.add(sail) // Flag const flagGeometry = new THREE.PlaneGeometry(1, 0.7) const flagMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, side: THREE.DoubleSide, }) const flag = new THREE.Mesh(flagGeometry, flagMaterial) flag.position.set(0, 7, 0.5) flag.castShadow = true ship.add(flag) ship.position.set(0, 0.5, 0) scene.add(ship) // Ship movement variables const shipState = { speed: 0, rotation: 0, maxSpeed: 0.3, acceleration: 0.01, deceleration: 0.005, rotationSpeed: 0.02, } // Keyboard controls const keys: { [key: string]: boolean } = {} const handleKeyDown = (e: KeyboardEvent) => { keys[e.key.toLowerCase()] = true } const handleKeyUp = (e: KeyboardEvent) => { keys[e.key.toLowerCase()] = false } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) // Handle window resize const handleResize = () => { const aspect = window.innerWidth / window.innerHeight camera.left = (frustumSize * aspect) / -2 camera.right = (frustumSize * aspect) / 2 camera.top = frustumSize / 2 camera.bottom = frustumSize / -2 camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) } window.addEventListener("resize", handleResize) // Animation loop const animate = () => { requestAnimationFrame(animate) // Ship controls if (keys["w"] || keys["arrowup"]) { shipState.speed = Math.min(shipState.speed + shipState.acceleration, shipState.maxSpeed) } else { shipState.speed = Math.max(shipState.speed - shipState.deceleration, 0) } if (keys["a"] || keys["arrowleft"]) { shipState.rotation += shipState.rotationSpeed } if (keys["d"] || keys["arrowright"]) { shipState.rotation -= shipState.rotationSpeed } // Update ship position and rotation ship.rotation.y = shipState.rotation ship.position.x += Math.sin(shipState.rotation) * shipState.speed ship.position.z += Math.cos(shipState.rotation) * shipState.speed // Camera follows ship with offset camera.position.x = ship.position.x + 30 camera.position.z = ship.position.z + 30 camera.lookAt(ship.position.x, 0, ship.position.z) ocean.position.y = Math.sin(Date.now() * 0.001) * 0.15 + Math.cos(Date.now() * 0.0007) * 0.1 // Animate sail sail.rotation.x = Math.sin(Date.now() * 0.002) * 0.1 // Animate flag flag.rotation.y = Math.sin(Date.now() * 0.003) * 0.3 renderer.render(scene, camera) } animate() // Cleanup return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) window.removeEventListener("resize", handleResize) mountRef.current?.removeChild(renderer.domElement) renderer.dispose() } }, []) return (

Controls: W/↑ = Forward | A/← = Turn Left | D/→ = Turn Right

) }

About

Tags

Share

More from grahamfleming

More Templates Like This

About

Tags

Share

About

Tags

Share

More from grahamfleming

More Templates Like This